
<template>
  <div class="hello">
    <!-- 柱形图渲染 -->
    <div id="chart">

    </div>
    <!-- 饼图渲染 -->
    <div id="pie">

    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      ws: null,
      //url: process.env.VUE_APP_BASE_API + "/websocket/server",
      url: "http://127.0.0.1:9209/websocket/server",
      barChart: null,
      pieChart: null,
      userId: null
    }
  },
  mounted(){
    //挂载的时候进行初始化
    this.init()
  },
  created(){

  },
  methods:{
    //柱状图
    initChart(data){
      if(!this.barChart){
        //  this.barChart 实例变量 存储柱状图Echarts实例
        //实例不存在 初始化一个新的实例
        this.barChart= this.$echarts.init(document.getElementById('chart'))
      }
      let chart = this.barChart
      //柱状图的配置选项对象
      const option = {
        //tooltip 鼠标悬停时的提示框配置
        tooltip: {
          //trigger: 'axis' 表示通过坐标轴触发显示提示信息，axisPointer: { type: 'shadow' } 表示使用阴影作为坐标轴指示器的样式。
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 x 轴字体颜色为白色
              }
            },
            type: 'category',
            data: data.dictLabelList,
            //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 y 轴字体颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: data.countList
            //data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
      chart.setOption(option)
    },
    init(){
      let obj = this.getUrlParams2(window.location.href);
      this.ws = new WebSocket(this.url);
      //连接成功的回调函数
      this.ws.onopen = this.websocketOnOpen;
      //消息接受时的回调函数
      this.ws.onmessage = this.websocketOnMessage;
    },
    websocketOnOpen(){
      console.log("连接成功")
    },
    websocketOnMessage(datas){
      console.log(datas)
      if(datas.data !== "连接成功"){
        let res = JSON.parse(datas.data)
        if(res.type == 1){
          this.$message({
            type: "warning",
            message: res.msg
          })
        }else{
          this.initChart(JSON.parse(datas.data).server)
          this.initPie(JSON.parse(datas.data).pie)
        }
      }
    },
    //从url中获取查询的参数
    getUrlParams2(url){
      let urlStr = url.split('?')[1]
      const urlSearchParams = new URLSearchParams(urlStr)
      const result = Object.fromEntries(urlSearchParams.entries())
      return result
    },
    //饼图
    initPie(pies){
      console.log(JSON.stringify(pies))
      //更改数据结构名称  dict_label 改成 name
      pies = pies.map(item => {
        return {
          name: item.dictLabel,
          value: item.countCrop
        };
      });
      if(!this.pieChart){
        this.pieChart= this.$echarts.init(document.getElementById('pie'))
      }
      let chart = this.pieChart
      const option = {
        title: {
          text: '农作物数量统计图',
          textStyle: {
            color: 'white'  // 设置标题颜色为白色
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: 'white'  // 设置图例文本颜色为白色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: pies,
            /*data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],*/
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 3.5 将配置参数和图表关联
      chart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.hello{
  display: flex;
  #chart,#pie{
    width: 600px;
    height: 400px;
    background-color: black;
  }
  #pie{
    margin-left: 20px;
  }
}
</style>
